import 'package:baselib/utils/image_util.dart';
import 'package:baselib/widgets/comm_app_bar.dart';
import 'package:baselib/widgets/comm_click_widget.dart';
import 'package:baselib/widgets/gradient_card_view.dart';
import 'package:baselib/widgets/inkwell_button.dart';
import 'package:flutter/material.dart';
import 'package:framelib/utils/color_util.dart';
import 'package:framelib/utils/drawable_util.dart';
import 'package:framelib/utils/px_util.dart';
import 'package:framelib/utils/string_util.dart';
import 'package:framelib/widgets/comm_widget_manager.dart';
import 'package:framelib/widgets/main_gradient_button.dart';
import 'package:framelib/widgets/page_widget.dart';
import 'package:get/get.dart';
import 'package:module_business/module_my/viewmodel/profile_edit_view_model.dart';
import 'package:module_business/module_my/viewmodel/recharge_view_model.dart';
/**
 * Recharge主页
 */
class RechargePage extends GetWidget<RechargeViewModel> {
  @override
  Widget build(BuildContext context) {
    return PageWidget.build(
        builder: (RechargeViewModel model){
          return PageWidget.PageScaffoldWidget(
            isShowBg: true,
            appBar: CommAppBar(
              backgroundColor: ColorUtil.instance.color_transparent,
              titleStr: StringUtil.instance.Recharge,
            ),
            body: ListView(
              padding: EdgeInsets.only(
                left: PxUtil.instance.px_15,
                right: PxUtil.instance.px_15,
                top: PxUtil.instance.px_20,
              ),
              shrinkWrap: true,
              children: [
                //Diamonds Balance
                Container(
                  width: PxUtil.instance.screenWidth,
                  child: Stack(
                    alignment: Alignment.centerLeft,
                    children: [
                      ImagesUtil.loadAssetImage(
                          DrawableUtil.instance.icon_recharge_top_bg,
                          width: PxUtil.instance.screenWidth,
                          fit: BoxFit.fitWidth
                      ),
                      Row(
                        children: [
                          SizedBox(width: PxUtil.instance.px_30,),
                          Expanded(child: Text(
                            StringUtil.instance.Diamonds_Balance,
                            style: TextStyle(
                              color: ColorUtil.instance.color_white,
                              fontSize: PxUtil.instance.px_16,
                            ),
                          )),
                          Text(
                            '2000',
                            style: TextStyle(
                              color: ColorUtil.instance.color_white,
                              fontSize: PxUtil.instance.px_22,
                              fontWeight: FontWeight.bold
                            ),
                          ),
                          SizedBox(width: PxUtil.instance.px_30,),
                        ],
                      )
                    ],
                  ),
                ),
                //购买列表
                GridView.builder(
                  shrinkWrap: true,
                  padding: EdgeInsets.only(
                    top: PxUtil.instance.px_20,
                    bottom: PxUtil.instance.px_20,
                    // left: PxUtil.instance.px_10,
                    // right: PxUtil.instance.px_10,
                  ),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing:20,
                      crossAxisSpacing: 20,
                      childAspectRatio: 1
                  ),
                  itemCount: model.rechargeCoinModels.length,
                  itemBuilder: (BuildContext context,int index){
                    var rechargeCoinModel = model.rechargeCoinModels[index];
                    return GradientCardView(
                      elevation: PxUtil.instance.px_0,
                      margin: EdgeInsets.only(),
                      alignment: Alignment.center,
                      borderRadius: BorderRadius.circular(
                          PxUtil.instance.px_8),
                      child: Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            color: ColorUtil.instance.color_2F4072,
                            borderRadius: BorderRadius.circular(
                                PxUtil.instance.px_8),
                          ),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Expanded(child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  ImagesUtil.loadAssetImage(
                                      rechargeCoinModel?.imgPath,
                                      width: PxUtil.instance.screenWidth/6
                                  ),
                                  Text(
                                    '${rechargeCoinModel?.coinNum??0}',
                                    style: TextStyle(
                                        color: ColorUtil.instance.color_a758ff,
                                        fontSize: PxUtil.instance.px_16
                                    ),
                                  )
                                ],
                              )),
                              InkWellButton(
                                // onPressed: ()=>model.deleteAccount(),
                                child: GradientCardView(
                                  elevation: PxUtil.instance.px_0,
                                  gradient: LinearGradient(
                                      begin: Alignment.topCenter,
                                      end: Alignment.bottomCenter,
                                      colors: [
                                        ColorUtil.instance.color_7973FE,
                                        ColorUtil.instance.color_AC2EF2,
                                      ]
                                  ),
                                  margin: EdgeInsets.only(),
                                  padding: EdgeInsets.only(
                                  ),
                                  borderRadius: BorderRadius.circular(
                                      PxUtil.instance.px_8),
                                  height: PxUtil.instance.px_42,
                                  child: Center(
                                    child: Text(
                                      '\$ ${rechargeCoinModel?.price??0}',
                                      style: TextStyle(
                                        color: ColorUtil.instance.color_white,
                                        fontSize: PxUtil.instance.px_16,
                                        fontWeight: FontWeight.bold
                                      ),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          )
                      ),
                    );
                  }
                )
              ],
            )
          );
        }
    );
  }
}
